<template>
  <div
    style="display: flex;justify-content: center;align-items: center;position: absolute;width: 100%;height: 100%;flex-direction: column;">
    <el-form style="width: 300px;" label-position="left" label-width="100px">
      <el-form-item label="字体大小">
        <div style="display: flex;">
          <el-input v-model="form.fontSize" style="margin-right: 10px;"></el-input>px
        </div>

      </el-form-item>
      <el-form-item label="潮位上间距">
        <div style="display: flex;">
          <el-input v-model="form.marginTop" style="margin-right: 10px;"></el-input>px
        </div>

      </el-form-item>
      <el-form-item label="潮位下间距">
        <div style="display: flex;">
          <el-input v-model="form.tideMarginBottom" style="margin-right: 10px;"></el-input>px
        </div>

      </el-form-item>
      <el-form-item label="时间下间距">
        <div style="display: flex;">
          <el-input v-model="form.timeMarginBottom" style="margin-right: 10px;"></el-input>px
        </div>
      </el-form-item>
    </el-form>
    <el-button style="margin: 0;margin-bottom: 20px;width: 300px;" type="primary" @click="saveSetting">保存设置</el-button>
    <el-button style="margin: 0;width: 300px;" type="primary" @click="startOB">开始观测</el-button>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import screenfull from 'screenfull';
export default {
  name: 'HomeView',
  components: {
    // HelloWorld
  },
  data() {
    return {
      form: {
        fontSize: '15',
        marginTop: '20',
        tideMarginBottom: '20',
        timeMarginBottom: '0'
      }

    }
  },
  methods: {
    saveSetting() {
      localStorage.setItem("fontSize", this.form.fontSize)
      localStorage.setItem("marginTop", this.form.marginTop)
      localStorage.setItem("tideMarginBottom", this.form.tideMarginBottom)
      localStorage.setItem("timeMarginBottom", this.form.timeMarginBottom)
    },
    startOB() {
      if (!screenfull.isEnabled) {return alert(`您的设备不支持全屏`);}
      screenfull.toggle();
      this.$router.push({
        name: "tideReader"
      });
    }
  },
  mounted(){
    this.saveSetting()
  }
}
</script>
